<template>
  <div class="_calendar _container" >
      <el-container>
        <el-main>
                     <el-calendar  v-model="value" :first-day-of-week="1" style="color:blue">
                        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                        <template slot="dateCell" slot-scope="{date, data}">
                          <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
                            <!--这里原本有动态绑定的class，去掉-->
                            <p :class="data.isSelected ? 'is-selected' : ''">
                            {{ data.day.split('-').slice(1).join('-') }}<br /> {{dealMyDate(data.day)}}{{ data.isSelected ? '✔️' : ''}}
                            </p>
                          </div>
                        </template>
                      </el-calendar>
          </el-main>
        <el-aside width="35%" style="overflow: hidden;" >
         <el-card >
            <div class="el-calendar__header">
              <div class="el-calendar__title">考核设置详情</div>
              <div class="el-calendar__button-group">
                <div class="el-button-group">
                </div>
              </div>
            </div>
            <div class="calendar-info" v-show="detailBoxShow">
              <div style="padding: 15px;">
                <div role="alert" class=" el-alert--success is-dark">
                  <div class="el-alert__content">
                    <el-form ref="AppraiseForm" :rules="rules" :model="appraiseForm" label-width="180px" size="mini">
                      <el-card shadow="hover">
                          <el-row>
                             <el-col :span="24" class="el-alert__title is-bold" style="color:red">
                              <el-form-item label="id：" v-if="false" >
                               {{appraiseForm.id}}
                              </el-form-item>
                            </el-col>
                            <el-col :span="24" class="el-alert__title is-bold" style="color:red">
                              <el-form-item label="考核日期：" >
                               {{appraiseForm.calendar}} - {{showFlag?"已设置考核":"未设置考核"}}
                              </el-form-item>
                            </el-col>
                            <el-col :span="24" class="el-alert__title is-bold">
                              <el-form-item label="考核名称" prop="parameterId">
                                <el-select v-model="appraiseForm.parameterId" clearable  placeholder="请选择" @change="stChangeHandler">
                                  <el-option
                                    v-for="item in toParameterList"
                                    :key="item.value"
                                    :label="item.title"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="24" class="el-alert__title is-bold">
                              <el-form-item label="上午考核时长：" >
                               {{appraiseForm.morning}} 小时
                              </el-form-item>
                            </el-col>
                            <el-col :span="24" class="el-alert__title is-bold">
                              <el-form-item label="下午考核时长：">
                               {{appraiseForm.evening}} 小时
                              </el-form-item>
                            </el-col>
                            <el-col :span="24" class="el-alert__title is-bold">
                              <el-form-item label="考核里程：">
                               {{appraiseForm.distance}} 公里
                              </el-form-item>
                            </el-col>
                            <el-col :span="24"  >
                            <el-form-item label="是否灵活考核：" class="el-alert__title is-bold">
                              <el-radio-group v-model="appraiseForm.flexible"  :disabled="true">
                                <el-radio label="1">是</el-radio>
                                <el-radio label="0">否</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-col>
                          <el-col :span="24"  >
                            <el-form-item label="是否默认考核：" class="el-alert__title is-bold">
                              <el-radio-group v-model="appraiseForm.isDefault" :disabled="true">
                                <el-radio label="y">是</el-radio>
                                <el-radio label="n">否</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-col>
                          </el-row>
                           <el-row>
                                <el-form-item class="align-text:center">
                                  <el-button type="primary" @click="handleAppraiseSave('AppraiseForm')">{{showFlag?"修改":"保存"}}</el-button>
                                </el-form-item>
                          </el-row>
                      </el-card>
                    </el-form>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-aside> 
      </el-container>

  </div>
</template>

<script>
import {getToParameterList,
        getDetail,
        appraiseSave,
        getToNowCalendarList,
        getToParameter} from "@/api/xapply/appraise/appraiseCalendar";
import {validatenull} from "@/util/validate";
 const getHandledValue = num => {
   return num < 10 ? '0' + num : num
 }
export default {
    data() {
        return {
          showFlag: false,
          value: new Date(),
          appraiseForm: {
            morning:'',
            evening:'',
            distance:'',
            flexible:'',
            isDefault:'',
            parameterId:'',
            id:''

          },
          detailBoxShow: false,
          toParameterList:[],
          resDate: [],
          //Form表单校验
          rules: {
            parameterId: [
              { required: true, message: '请选择考核', trigger: 'blur' },
            ],
          },
        }
    },
    mounted(day) {
      let date = day ;
      if(day == null || day == ''){
          date = this.value; 
      }
      
      this.initData(date);
    },
    created: function() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
         this.detailBoxShow = false;
         this.initData(this.value);
 
      });

      //点击下一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
         this.detailBoxShow = false;
         this.initData(this.value);

      });

      //点击今天
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", () => {
        this.detailBoxShow = false;
        this.initData(this.value);
 
      });
    });
  },
    methods:{
       initData(date) {
         let date_value = date.getFullYear() + '-' + getHandledValue((date.getMonth() + 1)) + '-' + getHandledValue(date.getDate());
            getToNowCalendarList(date_value).then(res=> {//查询考核参数列表
            const data = res.data.data;
            this.resDate =data;

          })
       },
      //checkbox值改变事件
      stChangeHandler(value) {
          console.log("---"+value);
          if(!validatenull(value)){
            getDetail(value).then(res=>{
              
              //this.appraiseForm = res.data.data;
                this.appraiseForm.morning = res.data.data.morning;
                this.appraiseForm.evening = res.data.data.evening;
                this.appraiseForm.distance = res.data.data.distance;
                this.appraiseForm.flexible = res.data.data.flexible;
                this.appraiseForm.isDefault = res.data.data.isDefault;
                console.log(res.data.data.morning);
            });
          }
      },
        dealMyDate(v) {
            let len = this.resDate.length
            let res = ""
            for(let i=0; i<len; i++){
                if(this.resDate[i].date == v) {
                    res = this.resDate[i].content
                    break
                }
            }
            return res
        },
        //点击日期块
        calendarOnClick(e) {
          this.detailBoxShow = false;
          this.appraiseForm.calendar = e.day;
           getToParameterList().then(res=> {//查询考核参数列表
            this.toParameterList = res.data.data;
          });
          getToParameter(e.day).then(res=>{
             if(res.data.data.flag){
                const detail = res.data.data.detail;
                console.log(detail.morning);
                this.appraiseForm = detail;
              }else{
                this.appraiseForm.morning = null;
                this.appraiseForm.evening = null;
                this.appraiseForm.distance = null;
                this.appraiseForm.flexible = null;
                this.appraiseForm.isDefault = null;
                this.appraiseForm.id = null;
                this.appraiseForm.parameterId = null;
              }
              this.showFlag = res.data.data.flag;
              this.detailBoxShow = true;
          });
        },
        //保存设置
        handleAppraiseSave(form) {
         this.$refs[form].validate((valid) => {
            if (!valid){
              console.log('error submit!!');
              return false;
            }else{
                  appraiseSave(this.appraiseForm.id,this.appraiseForm.calendar,this.appraiseForm.parameterId).then(() => {
                    //this.onLoad(this.page);
                    this.$message({
                      type: "success",
                      message: "保存成功!"
                    });
                    this.detailBoxShow = false;
                  }, error => {
                   // loading();
                    window.console.log(error);
                  });
            }
         })
        }
    }
}
</script>
<style scoped>
.is-selected {
  color: #fc0519;
}
.p-popover {
  text-align: center;
}

.el-main {
  padding: 0px;
  overflow: hidden;
}
.calendar-info {
  height: 95%;
  overflow: auto;
}
.el-alert {
  margin: 15px 0px;
}
.el-alert:hover {
  transform: scale(1.02);
}
.el-alert:active {
  transform: scale(1.01);
}
.el-alert__content i {
  font-size: 16px;
}

.theme-dark .calendar-info {
  background-color: #1d1e1f;
  border-left: 1px solid #404042;
}
.theme-light .calendar-info,
.theme-light .el-calendar__header {
  background-color: #fff;
  border-left: 1px solid #ebeef5;
}
</style>
<style >
._calendar .div-Calendar {
  height: 110px;
  box-sizing: border-box;
  padding: 8px;
}
._calendar .el-calendar-table .el-calendar-day {
  padding: 0px;
  height: 110px;
}
._calendar .el-container,
._calendar .el-calendar {
  height: 100%;
}

</style>